<template>
    <ul class="singer-similar">
       <li v-for="(item,index) in list" :key="index">
         <div class="singer-similar-img" @click="toSingerDetail(item.singer_mid)">
           <img v-lazy="item.singer_avatar" alt="">
         </div>
         <div class="name ellipsis"  @click="toSingerDetail(item.singer_mid,item.singer_id)">{{item.singer_name}}</div>
       </li>
    </ul>
</template>

<script>
    export default {
        name: "SingerSimilar",
        props:{
          list:Array
        },
        methods:{
          toSingerDetail(mid){
            this.$router.replace(`/singerdetail/${mid}`);
            location.reload();
          }
        }
    }
</script>

<style scoped lang="less">
.singer-similar{
  li{
    width: 220px;
    height: 240px;
    margin: 10px 18px 10px 0px;
    display: inline-block;
    background-color: #FBFBFD;
    text-align: center;
    .singer-similar-img{
      margin: 15px auto 20px;
      >img{
        width: 154px;
        height: 154px;
        border-radius: 50%;
      }
    }
    .name{
      font-size: 14px;
      line-height: 2;
      &:hover{
        color: #31c27c;
        cursor: pointer;
      }
    }
  }
}
</style>
